<template>
  <div>
    <!-- 搜索条 -->
    <div class="search">
      <div class="search-item">
        <icon type='search'/>
        <span>搜索</span>
      </div>
    </div>
    <!-- 轮播图 -->
    <swiper indicator-dots=true>
      <swiper-item :key='index' v-for='(item, index) in swiperData'>
        <image :src='item.image_src'></image>
      </swiper-item>
    </swiper>
    <!-- 菜单 -->
    <div class="menu">
      <div :key='index' v-for='(item, index) in menuData' class="menu-item">
        <image :src='item.image_src'></image>
      </div>
    </div>

  </div>
</template>
<script>
import request from '../../utils/request'
export default {
  data () {
    return {
      // 提供轮播图数据
      swiperData: [],
      menuData: []
    }
  },
  async created() {
    // mpvue是wx的别名
    // mpvue希望可以支持所有的小程序（微信、支付宝、头条、百度）
    // 调用后台接口获取轮播图数据
    // 方法1
    // mpvue.request({
    //   url: 'https://www.ehomespace.com/api/public/v1/home/swiperdata',
    //   method: 'get',
    //   success: (res) => {
    //     // 更新data中的轮播图数据
    //     this.swiperData = res.data.message
    //   }
    // })
    // 方法2
    // request("https://www.ehomespace.com/api/public/v1/home/swiperdata")
    // .then(res=>{
    //   this.swiperData = res.data.message
    // })
    // 方法3
      let res = await request('home/swiperdata')
      this.swiperData = swiperRes.data.message


    // 菜单数据获取
    // 方法1
    // mpvue.request({
    //   url: 'https://www.ehomespace.com/api/public/v1/home/catitems',
    //   method: 'get',
    //   success: (res) => {
    //     // 更新data中的菜单数据
    //     this.menuData = res.data.message
    //   }
    // })
    // 方法2
    //  request("home/catitems")
    // .then(res=>{
    //   this.menuData = res.data.message
    // })
    //方法3
    let menuRes = await request('home/catitems')
    this.menuData  = menuRes.data.message
  }
}
</script>
<style scoped>
.search {
  background-color:#EB4450;
  padding: 20rpx;
  
}
.search-item {
  background-color: #fff;
  border-radius: 18rpx;
  text-align: center;
}
.search-item icon {
  vertical-align: middle;
}
.menu {
  margin-top: 10rpx;
  display: flex;
}
.menu .menu-item {
  flex: 1;
}
.menu .menu-item image {
  width: 180rpx;
  height: 170rpx;
}
</style>
